<template>
  <div class="quick-entry">
    <el-card class="quick-entry-list">
      <div class="enter-header">
        <p class="title">快捷入口</p>
        <div class="add-quick-entry-btn" @click="addEntry">
          <i class="el-icon-plus"/>
          添加
        </div>
      </div>
      <el-row v-if="quickEntryChoice && quickEntryChoice.length" :gutter="16">
        <template v-for="(item, i) in quickEntryChoice">
          <el-col v-if="i < 12" :key="i" :span="8" class="quick-entry-item">
            <div class="quick-entry-item-box" @click="pageClick(item)">
              <img :src="closeIcon" class="delete-item-btn" alt="" @click.stop.prevent="deleteentry(item, i)" >
              <img :src="item.img" alt="img">
              <span class="enter-text overflow">{{ item.title }}</span>
            </div>
          </el-col>
        </template>
      </el-row>
      <div v-else style="text-align:center;">
        <empty-placeholder :empty-img="indexEmptyIcon" :empty-text-top="0" text-color="#999" text="暂无快捷入口，点击按钮添加" image-size="137px" style="margin-top: 70px;margin-bottom: 16px;" />
        <el-button type="primary" size="small" @click="addEntry">添加入口</el-button>
      </div>

    </el-card>
    <el-dialog
      :visible="visibleDailog"
      :before-close="handleClose"
      :append-to-body="false"
      class="entry-setting-dialog medium-common-dialog-size"
      width="450px">
      <!-- <div slot="title" class="entry-setting-title">快捷入口配置</div> -->
      <Title slot="title" title="快捷入口配置" style="margin: 16px 24px 6px 24px" />
      <div>
        <el-row :gutter="16">
          <el-col v-for="(item, i) in entryList" :key="i" :span="4" class="quick-entry-item-dialog">
            <div class="quick-entry-item-box" @click="toClick(item)">
              <img :src="item.img" alt="img">
              <span class="enter-text">{{ item.title }}</span>
              <span v-if="item.isShow" class="pitch_on">
                <img :src="pitch_on" alt="pitch_on">
              </span>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getQuickEntry, getQuickEntryAdd } from '@/api/home';
import { ROUTER_TYPES, hasRouteAuth } from '@/utils/permission';
import ElMessage from '@/utils/message';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import Title from '@/components/Title';

// png
import statistical_table from '@/assets/home/statistical_table.png';
import settlement_management from '@/assets/home/settlement_management.png';
import order from '@/assets/home/order.png';
import closeIcon from '@/assets/home/close.png';
import project from '@/assets/home/project.png';
import client from '@/assets/home/client.png';
import sales_performance from '@/assets/home/sales_performance.png';
import invoice from '@/assets/home/invoice.png';
import contract from '@/assets/home/contract.png';
import subcribe from '@/assets/home/subcribe.png';
import resource from '@/assets/home/resource.png';
import auth from '@/assets/home/auth.png';
import hot from '@/assets/home/hot_enter.png';
import supplier from '@/assets/home/supplier.png';
import finance from '@/assets/home/finance.png';
import sealing from '@/assets/home/sealing.png';
import mengli from '@/assets/home/mengli.png';
import system from '@/assets/home/system.png';
import pitch_on from '@/assets/home/pitch_on.png';
import mengli_client from '@/assets/home/mengli_client.png';
import commerce from '@/assets/home/commerce.png';
import mengli_supplier from '@/assets/home/mengli_supplier.png';
import mengli_order from '@/assets/home/mengli_order.png';
import ipImage from '@/assets/home/ipImage.png';
import goodsCommerce from '@/assets/home/goodsCommerce.png';
import inventory from '@/assets/home/inventory.png';
import help from '@/assets/home/help.png';
import supplier_settle_icon from '@/assets/home/supplier_settle_icon.png';
import energyIcon from '@/assets/home/energy.png';
import targetIcon from '@/assets/home/target.png';
import indexEmptyIcon from '@/assets/indexEmpty.png';

const resourceAuth = [...ROUTER_TYPES.MEDIUMORDER, ...ROUTER_TYPES.MEDIUM_RESOURCE, ROUTER_TYPES.CRM_SUBCRIBE];
export default {
  name: 'QuickEntry',
  components: { EmptyPlaceholder, Title },
  data() {
    return {
      pitch_on, indexEmptyIcon, closeIcon,
      entryList: [
        { id: 'chart:departEdit:read', title: '统计图表', name: 'dashboard', isShow: false, img: statistical_table },
        { id: 'total:report:read', title: '报表管理', name: 'total', isShow: false, img: settlement_management },
        { id: 'crm:orderList:read', title: '渠道订单', name: 'allOrder', isShow: false, img: order },
        { id: 'crm:project:read', title: '项目订单', name: 'projectList', isShow: false, img: project },
        { id: 'crm:customer:read', title: '客户管理', name: 'customer', isShow: false, img: client },
        { id: 'crm:sales:read', title: '销售业绩', name: 'salesPerformance', isShow: false, img: sales_performance },
        { id: 'crm:receipt:read', title: '发票管理', name: 'invoice', isShow: false, img: invoice },
        { id: 'crm:contract:read', title: '合同管理', name: 'ContractManagement', isShow: false, img: contract },
        { id: 'crm:subcribe:read', title: '预约日历', name: 'subcribe', isShow: false, img: subcribe },
        { id: JSON.stringify(resourceAuth), title: '资源列表', name: 'resource', isShow: false, img: resource },
        { id: 'auth:role:read', title: '权限管理', name: 'userAuthManage', isShow: false, img: auth },
        { id: 0, title: '实时热榜', name: 'hotList', isShow: false, img: hot }, // 没有设置权限
        { id: 'medium:supplier:read', title: '供应商管理', name: 'supplierManage', isShow: false, img: supplier },
        { id: 'crm:finance:read', title: '财务流水', name: 'dayAccount', isShow: false, img: finance },
        { id: 'crm:finance:sealAccountRead', title: '财务封账', name: 'sealingAccount', isShow: false, img: sealing },
        { id: 'mengli:list:read', title: '表情包管理', name: 'mengliPlanet', isShow: false, img: mengli },
        { id: 'auth:log:read', title: '操作日志', name: 'operatorLogManage', isShow: false, img: system },
        { id: 1, title: '电商商品', name: 'commerceManage', isShow: false, img: goodsCommerce },
        { id: 2, title: '电商销售', name: 'commerceOrder', isShow: false, img: commerce },
        { id: 'mengli:allOrder:read', title: '萌力订单', name: 'mengliOrder', isShow: false, img: mengli_order },
        { id: 'mengli:customer:read', title: '萌力客户', name: 'mengliCustomer', isShow: false, img: mengli_client },
        { id: 'mengli:supplier:read', title: '萌力供应商', name: 'mengliSuppliers', isShow: false, img: mengli_supplier },
        { id: 'mengli:ipImage:read', title: 'IP形象管理', name: 'mengliIpImage', isShow: false, img: ipImage },
        { id: 'mengli:inventory:read', title: '库存管理', name: 'mengliInventory', isShow: false, img: inventory },
        { id: 'energy:energyList:read', title: '精力分配', name: 'energy', isShow: false, img: energyIcon },
        { id: 'crm:target:read', title: '目标管理', name: 'target', isShow: false, img: targetIcon },
        { id: 3, title: '帮助中心', name: 'help', isShow: false, img: help },
        // v3.0.4新增
        { id: 'invoice:issue:read', title: '开票申请', name: 'issueInvoice', isShow: false, img: order },
        { id: 'invoice:abandon:read', title: '发票作废', name: 'invoiceAbandon', isShow: false, img: auth },
        { id: 'crm:reimbursement:read', title: '员工报销', name: 'reimbursement', isShow: false, img: inventory },
        { id: 'crm:payBack:read', title: '还款申请', name: 'payBack', isShow: false, img: sealing },
        { id: 'crm:loan:read', title: '借款申请', name: 'loan', isShow: false, img: targetIcon },
        { id: 'crm:flyNotice:read', title: '飞来询单', name: 'flyNotice', isShow: false, img: goodsCommerce },
        { id: 'signUp:signUp:read', title: '签约内审', name: 'signUp', isShow: false, img: order },
        { id: 'medium:supplierAudit:read', title: '付款申请', name: 'supplier', isShow: false, img: supplier_settle_icon }
      ],
      quickEntryChoice: [],
      quickEntry: [],
      visibleDailog: false
    };
  },
  created() {
    this.getQuickEntry();
  },
  methods: {
    hasRouteAuth,
    getQuickEntry() {
      getQuickEntry().then(res => {
        this.quickEntry = res.data.quickEntry;
        if (this.quickEntry && this.quickEntry.length) {
          this.entryList.map((item, i) => {
            this.quickEntry.forEach(val => {
              if (item.id === val) {
                item.isShow = true;
                this.quickEntryChoice.push(item);
              }
            });
            return item;
          });
        }
        this.quickEntryChoice = this.unique(this.quickEntryChoice);
      }).catch(err => {
        console.error(err);
      });
    },
    pageClick(item) { // 权限判断
      if (item.title === '资源列表') {
        item.id = JSON.parse(item.id);
      }
      const isHasAuth = typeof item.id !== 'number' ? hasRouteAuth(item.id) : true;
      if (isHasAuth || item.title === '实时热榜') {
        this.$router.push({
          name: item.name
        });
      } else {
        ElMessage.warning('您暂无该页面的权限，请到用户管理-权限管理进行设置或联系管理员');
      }
    },
    addEntry() {
      this.visibleDailog = true;
      this.getQuickEntry();
    },
    handleClose() {
      this.visibleDailog = false;
      this.setQuickEntry();
    },
    setQuickEntry(notTip) {
      this.quickEntryChoice = this.unique(this.quickEntryChoice);
      let quickEntry = [];
      this.quickEntryChoice.forEach(item => {
        quickEntry.push(item.id);
      });
      quickEntry = this.unique(quickEntry);
      getQuickEntryAdd({ quickEntry }).then(res => {
        if (!notTip) ElMessage.success('保存成功');
        quickEntry = []; // 初始化
      }).catch(err => {
        console.error(err);
      });
    },
    toClick(item) {
      if (item.isShow) {
        this.hideClick(item);
      } else {
        this.showClick(item);
      }
    },
    deleteentry(item, index) {
      this.quickEntryChoice.splice(index, 1);

      for (let i = 0; i < this.entryList.length; i++) {
        if (this.entryList[i].id === item.id) {
          this.entryList[i].isShow = false;
        }
      }
      this.setQuickEntry(true);
    },
    hideClick(item) {
      item.isShow = false;
      for (let i = 0; i < this.quickEntryChoice.length; i++) {
        if (this.quickEntryChoice[i].id === item.id) {
          this.quickEntryChoice.splice(i, 1);
        }
      }
    },
    showClick(item) {
      this.quickEntryChoice = this.unique(this.quickEntryChoice);
      if (this.quickEntryChoice.length >= 12) {
        ElMessage.warning('仅支持展示12个快捷入口，可取消其它项以便添加');
        return false;
      }
      item.isShow = true;
      this.quickEntryChoice.push(item);
    },
    unique(arr) {
      const res = new Map();
      return arr.filter((a) => !res.has(a) && res.set(a, 1));
    }
  }
};
</script>
<style lang="scss" scoped>
.quick-entry {
  margin-top: 12px;
  .quick-entry-list {
    box-shadow: 2px 2px 8px 0px #DDE1EA;
    border-radius: 4px;
    &::v-deep {
      .el-card__body {
        padding: 17px 20px 26px;
        height: 418px;
        .enter-header {
          display: flex;
          justify-content: space-between;
          .title {
            margin: 0;
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
          }
          img {
            width: 20px;
            height: 20px;
          }
        }
        .quick-entry-item {
          .quick-entry-item-box {
            cursor: pointer;
            text-align: center;
            margin-top: 24px;
            position: relative;
            img {
              width: 24px;
              height: 24px;
            }
            .enter-text {
              margin-top: 12px;
              display: block;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
              width: 100%;
            }
            .overflow {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          &:hover {
            .delete-item-btn {
              display: block;
            }
          }
        }
      }
    }
  }
  .entry-setting-dialog{
    &::v-deep {
      .el-dialog__body {
        padding: 10px 24px 32px 24px !important;
      }
    }
    .entry-setting-title {
      margin: 24px 24px 0;
      padding: 0 8px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      border-left: 4px solid #406EFF;
    }
    .quick-entry-item-dialog {
      .quick-entry-item-box {
        position: relative;
        cursor: pointer;
        text-align: center;
        width: 80px;
        height: 80px;
        background: #F8F9FF;
        box-shadow: 0px 2px 4px 0px #E0E3EE;
        border-radius: 4px;
        padding: 15px 0 12px 0;
        margin-bottom: 16px;
        img {
          width: 24px;
          height: 24px;
        }
        .enter-text {
          display: block;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
      }
      .pitch_on {
        position: absolute;
        top: 0;
        right: 0;
        width: 16px;
        height: 16px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.delete-item-btn {
  width: 16px !important;
  height: 16px !important;
  color: #666;
  position: absolute;
  right: 20px;
  top: -7px;
  cursor: pointer;
  display: none;
}
.add-quick-entry-btn {
  cursor: pointer;
  display:flex;
  align-items:center;
  color: #666666;
  font-size: 14px;
  &:hover {
    color: #406EFF;
  }
}
</style>
<style lang="scss">
.no-auth-message {
  .el-message-box__btns {
    .el-button {
      margin-right: 0 !important;
      margin-left: 0 !important;
      background-color: #406eff !important;
      color: #fff !important;
  }
  }
}
</style>
